{extend name="layout/layout" /}

{block name="pagecss"}
<style>
    .layui-blue {
        color: #01AAED !important;
    }
    .layui-tab-title .layui-this {
        background-color: #fff;
        color: #fff;
    }
    .layui-carousel>[carousel-item]:before {
        position: unset;
    }
</style>
{/block}

{block name="content"}
<div class="layui-form">
    <div class="layui-row panel_box">
        <div class="panel layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2">
            <a href="javascript:;" target="_blank">
                <div class="panel_icon layui-bg-red">
                    <i class="layui-icon">&#xe667;</i>
                </div>
                <div class="panel_word">
                    <span>{$data.lowStocks}</span>
                    <cite>库存不足</cite>
                </div>
            </a>
        </div>
        <div class="panel layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2">
            <a href="javascript:;">
                <div class="panel_icon layui-bg-orange">
                    <i class="layui-icon">&#xe66e;</i>
                </div>
                <div class="panel_word">
                    <span>{$data.countPurchases}</span>
                    <em>要货单</em>
                </div>
            </a>
        </div>
        <div class="panel layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2">
            <a href="javascript:;">
                <div class="panel_icon layui-bg-cyan">
                    <i class="layui-icon">&#xe63c;</i>
                </div>
                <div class="panel_word">
                    <span>{$data.countReturnPurchases}</span>
                    <em>退货单</em>
                </div>
            </a>
        </div>
        <div class="panel layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2">
            <a href="javascript:;">
                <div class="panel_icon layui-bg-blue">
                    <i class="layui-icon">&#xe857;</i>
                </div>
                <div class="panel_word">
                    <span>{$data.refundOrder}</span>
                    <cite>售后退款</cite>
                </div>
            </a>
        </div>
    </div>

    <div class="layui-row layui-col-xs12">
        <div class="layui-card">
            <div class="layui-card-header" style="padding: 0;">
                <form class="layui-form h between">
                    <div class="layui-inline">
                        <!--<div class="layui-input-inline">
                            <select name="store_id">
                                <option value="">所有门店</option>
                                {foreach name="stores" item="store"}
                                    <option value="{$store.id}">{$store.name}</option>
                                {/foreach}
                            </select>
                        </div>-->
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input lay-date-range" name="range_date" value="" placeholder="时间">
                        </div>

                        <input type="text" class="layui-input" value="阻止回车键提交" style="display: none;">
                        <a class="layui-btn search_btn" data-type="reload">搜索</a>
                        <button type="reset" class="layui-btn layui-btn-danger reset_btn"><i class="layui-icon">&#xe669;</i></button>
                    </div>
                    <div class="layui-inline"></div>
                </form>
            </div>
            <div class="layui-card-body" style="padding: 10px 0;">
                <table class="layui-table magt0" id="projectStatistics-table">
                    <thead>
                    <tr>
                        <th>项目</th>
                        <th>概况</th>
                        <!--<th>会员钱包</th>-->
                        <th>余额支付</th>
                        <th>微信支付</th>
                        <th>支付宝支付</th>
                    </tr>
                    </thead>
                    <tbody>
                        {$data.projectStatistics}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">商品库存</div>
                <div class="layui-card-body" style="padding: 10px 0;">
                    <blockquote class="layui-elem-quote quoteBox" style="height: 46px;border-left:none">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="margin-top: 12px;">
                                商品数（种）：<span class="layui-blue">{$data.product.countProducts}</span>
                            </div>
                            <div class="layui-inline" style="margin-top: 12px;margin-left: 50px;">
                                商品库存量：<span class="layui-blue">{$data.product.countStocks}</span>
                            </div>
                            <div class="layui-inline" style="margin-top: 12px;margin-left: 50px;">
                                30天内过期数量（种）：<span class="layui-blue">{$data.product.countDeadline}</span>
                            </div>
                        </div>
                    </blockquote>

                    <div class="layui-tab layui-tab-brief" lay-filter="product-tabs">
                        <ul class="layui-tab-title">
                            <li class="layui-this">销量排名Top5</li>
                            <li class="">金额排名Top5</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-col-md4">
                                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                                        <div carousel-item id="echart-product_sales">
                                            <div><!--<i class="layui-icon layui-icon-loading1 layadmin-loading"></i>--></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md8">
                                    <table class="layui-table magt0">
                                        <thead>
                                            <tr>
                                                <th>排名</th>
                                                <th>商品名称</th>
                                                <th>销量</th>
                                                <th>占比</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {foreach name="data.product.salesRanking.data" item="sales" key="salesKey"}
                                            <tr>
                                                <td>{$salesKey + 1}</td>
                                                <td>{$sales.product_name}</td>
                                                <td>{$sales.count}</td>
                                                <td>{:number_format(($sales.count / $data.product.salesRanking.totalSales * 100), 2, '.', '')} %</td>
                                            </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-col-md4">
                                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                                        <div carousel-item id="echart-product_trade">
                                            <div><!--<i class="layui-icon layui-icon-loading1 layadmin-loading"></i>--></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md8">
                                    <table class="layui-table magt0">
                                        <thead>
                                            <tr>
                                                <th>排名</th>
                                                <th>商品名称</th>
                                                <th>交易额（元）</th>
                                                <th>占比</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {foreach name="data.product.tradeRanking.data" item="trade" key="tradeKey"}
                                            <tr>
                                                <td>{$tradeKey + 1}</td>
                                                <td>{$trade.product_name}</td>
                                                <td>{$trade.total_price / 100}</td>
                                                <td>{:number_format(($trade.total_price / $data.product.tradeRanking.totalAmount * 100), 2, '.', '')} %</td>
                                            </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">运营统计</div>
                <div class="layui-card-body" style="padding: 10px 0;">
                    <blockquote class="layui-elem-quote quoteBox" style="height: 46px;border-left:none">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="margin-top: 12px;">
                                今日交易额：<span class="layui-blue">{$data.operationStatistics.todayAmount}</span>
                            </div>
                            <div class="layui-inline" style="margin-top: 12px;margin-left: 50px;">
                                今日订单数：<span class="layui-blue">{$data.operationStatistics.todayOrder}</span>
                            </div>
                            <div class="layui-inline" style="margin-top: 12px;margin-left: 50px;">
                                今日新增会员：<span class="layui-blue">{$data.operationStatistics.todayMember}</span>
                            </div>
                        </div>
                    </blockquote>

                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade">
                        <div carousel-item id="operation-heaparea">
                            <div><!--<i class="layui-icon layui-icon-loading1 layadmin-loading"></i>--></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="projectStatistics_url" value="{:url('admin/dashboard/ajaxProjectStatistics')}">
{/block}

{block name="pagescript"}
<!--<script src="__STATIC__/admin/pages/js/dashboard.js" type="text/javascript"></script>-->
<script>
    // 区块轮播切换
    layui.use(['carousel'], function(){
        var $ = layui.$,
            carousel = layui.carousel,
            device = layui.device();

        // 轮播切换
        $('.layadmin-carousel').each(function(){
            var othis = $(this);
            carousel.render({
                elem: this
                ,width: '100%'
                ,arrow: 'none'
                ,interval: othis.data('interval')
                ,autoplay: othis.data('autoplay') === true
                ,trigger: (device.ios || device.android) ? 'click' : 'hover'
                ,anim: othis.data('anim')
            });
        });
    });

    layui.use(['form', 'laydate', 'element'], function(){
        var $ = layui.$,
            laydate = layui.laydate,
            element = layui.element;

        var isLoadEchartTradeRanking = false;

        // 销量排名Top5
        echartSalesRanking();
        // 运营统计
        operationStatistics();

        // 执行一个laydate实例
        var laydate = laydate.render({
            elem: '.lay-date-range', //指定元素
            type: 'date',
            range: '~', // '~' 自定义分割字符
            format: 'yyyy-MM-dd',
            trigger: 'click',
            done: function(value, date){

            }
        });

        // 搜索
        $(".search_btn").on("click", function(){
            var range_date = $('.lay-date-range').val();
            if(range_date != ''){
                var params = {
                    range_date: range_date
                };
                ajaxProjectStatistics(params);
            }else{
                layer.msg("请选择筛选条件");
            }
        });

        // 清空搜索
        $(".reset_btn").on("click", function(){
            ajaxProjectStatistics();
        });

        // Tab 切换
        element.on('tab(product-tabs)', function(obj){
            //layer.msg(obj.index + '：' + this.innerHTML);
            if (obj.index === 0) {
                // 销量排名Top5
                //echartSalesRanking();
            } else if (obj.index === 1) {
                // 交易额排名Top5
                if(!isLoadEchartTradeRanking){
                    isLoadEchartTradeRanking = true;
                    echartTradeRanking();
                }
            }
        });

        // Ajax 项目统计
        function ajaxProjectStatistics(params) {
            var projectStatistics_url = $('.projectStatistics_url').val();
            var data = {};
            if(params){
                data = params;
            }

            $.post(
                projectStatistics_url,
                data,
                function(res){
                    $('#projectStatistics-table').find('tbody').empty().html(res);
                }
            );
        }
    });

    // 销量排名Top5
    function echartSalesRanking() {
        layui.use(['echarts'], function(){
            var $ = layui.$,
                echarts = layui.echarts;

            var statistics = {$data.product.salesRanking.statistics};
            var name = statistics.name;
            var value = statistics.value;
            var data = [];

            for (i=0; i<name.length; i++) {
                data.push({
                    'value': value[i],
                    'name': name[i],
                });
            }

            var echartProduct = [],
                productOpt = [
                    {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [{
                            name:'排名',
                            type:'pie',
                            //radius : '55%',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }]
                    }
                ],
                elemProduct = $('#echart-product_sales').children('div'),
                renderProduct = function(index){
                    echartProduct[index] = echarts.init(elemProduct[index], layui.echartsTheme);
                    echartProduct[index].setOption(productOpt[index]);
                    window.onresize = echartProduct[index].resize;
                };

            if(!elemProduct[0]) return;
            renderProduct(0);
        });
    }

    // 交易额排名Top5
    function echartTradeRanking() {
        layui.use(['echarts'], function(){
            var $ = layui.$,
                echarts = layui.echarts;

            var statistics = {$data.product.tradeRanking.statistics};
            var name = statistics.name;
            var value = statistics.value;
            var data = [];

            for (i=0; i<name.length; i++) {
                data.push({
                    'value': value[i],
                    'name': name[i],
                });
            }

            var echartProduct = [],
                productOpt = [
                    {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [{
                            name:'排名',
                            type:'pie',
                            //radius : '55%',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }]
                    }
                ],
                elemProduct = $('#echart-product_trade').children('div'),
                renderProduct = function(index){
                    echartProduct[index] = echarts.init(elemProduct[index], layui.echartsTheme);
                    echartProduct[index].setOption(productOpt[index]);
                    echartProduct[index].resize;
                };

            if(!elemProduct[0]) return;
            renderProduct(0);
        });
    }

    // 运营统计
    function operationStatistics() {
        layui.use(['echarts'], function(){
            var $ = layui.$,
                echarts = layui.echarts;

            var data = eval({$data.operationStatistics.statistics});

            // 运营统计 - 堆积面积图(折线图)
            var echHeaparea = [],
                heaparea = [
                    {
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['会员数','订单数','交易额']
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : data.day
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name : '会员数',
                                axisLabel : {
                                    formatter: '{value} 个'
                                }
                            },
                            {
                                type : 'value',
                                name : '订单数',
                                axisLabel : {
                                    formatter: '{value} 个'
                                }
                            },
                            /*{
                                type : 'value',
                                name : '交易额',
                                axisLabel : {
                                    formatter: '{value} 元'
                                }
                            }*/
                        ],
                        series : [
                            {
                                name:'会员数',
                                type:'line',
                                stack: '总量',
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: data.countMember
                            },
                            {
                                name:'订单数',
                                type:'line',
                                yAxisIndex:1,
                                stack: '总量',
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: data.countMember
                            },
                            {
                                name:'交易额',
                                type:'line',
                                //yAxisIndex:1,
                                stack: '总量',
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: data.totalAmount
                            }
                        ]
                    }
                ],
                elemHeaparea = $('#operation-heaparea').children('div'),
                renderHeaparea = function(index){
                    echHeaparea[index] = echarts.init(elemHeaparea[index], layui.echartsTheme);
                    echHeaparea[index].setOption(heaparea[index]);
                    window.onresize = echHeaparea[index].resize;
                };

            if(!elemHeaparea[0]) return;
            renderHeaparea(0);
        });
    }
</script>
{/block}